﻿@inject IFlatProductsProvider FlatProductService

<div class="demo-description mw-1100" id="SingleSelectedDataRow">
    <h2><DemoNavLink Link="GridSelection#SingleSelectedDataRow" />Data Grid - Single Row Selection</h2>
    <p>
        The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1#row-selection">Data Grid</a> component allows users to click a row to select it.
        Use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.SingleSelectedDataRow">SingleSelectedDataRow</a> property to specify the selected data row in code.
        To track selection changes in this mode, use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.SingleSelectedDataRowChanged">SingleSelectedDataRowChanged</a> event or the two-way synchronization as demonstrated in this module.
    </p>
</div>

@if (DataSource == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <div class="card demo-card-wide border-bottom-0 mw-1100" style="border-bottom-left-radius: 0; border-bottom-right-radius: 0">
        <div class="card-header border-bottom-0">Selected Product: <b>@(SelectedProduct == null ? "(none)" : SelectedProduct.ProductName)</b></div>
    </div>

    <DxDataGrid Data="@DataSource"
                @bind-SingleSelectedDataRow="@SelectedProduct"
                CssClass="datagrid-border-radius-top-0 mw-1100">
        <DxDataGridColumn Field="@nameof(ProductFlat.ProductName)" Caption="Product Name"></DxDataGridColumn>
        <DxDataGridColumn Field="@nameof(ProductFlat.Category)"></DxDataGridColumn>
        <DxDataGridColumn Field="@nameof(ProductFlat.Subcategory)"></DxDataGridColumn>
    </DxDataGrid>

    <CodeSnippet_Grid_Selection_Single />
}

@code {
    IEnumerable<ProductFlat> DataSource;

    ProductFlat selectedProduct;
    public ProductFlat SelectedProduct
    {
        get
        {
            return selectedProduct;
        }
        set
        {
            selectedProduct = value;
            InvokeAsync(StateHasChanged);
        }
    }

    protected override async Task OnInitializedAsync()
    {
        DataSource = await FlatProductService.LoadAsync();
        SelectedProduct = DataSource.First();
    }
}
